// pages/Dashboard/Dashboard.tsx
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Computer, HardDrive, Network, Activity } from 'lucide-react';
import { useApp } from '../../App';
import { ROUTES } from '../../router';

interface StatCard {
  title: string;
  value: number;
  icon: React.ReactNode;
  color: string;
  link: string;
}

const Dashboard: React.FC = () => {
  const { darkMode } = useApp();
  const navigate = useNavigate();
  
  // 模拟当前连接状态 - 在实际应用中应该从全局状态管理中获取
  const currentConnection = true;

  const stats: StatCard[] = [
    {
      title: 'Virtual Machines',
      value: 12,
      icon: <Computer size={24} />,
      color: 'bg-purple-500',
      link: ROUTES.DOMAINS
    },
    {
      title: 'Running',
      value: 8,
      icon: <Activity size={24} />,
      color: 'bg-green-500',
      link: ROUTES.DOMAINS
    },
    {
      title: 'Storage Pools',
      value: 3,
      icon: <HardDrive size={24} />,
      color: 'bg-blue-500',
      link: ROUTES.STORAGE
    },
    {
      title: 'Networks',
      value: 2,
      icon: <Network size={24} />,
      color: 'bg-yellow-500',
      link: ROUTES.NETWORKS
    }
  ];

  if (!currentConnection) {
    return (
      <div className="text-center py-12">
        <p className="text-lg text-gray-400 mb-4">No connection selected</p>
        <button
          onClick={() => navigate(ROUTES.CONNECTIONS)}
          className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors"
        >
          Go to Connections
        </button>
      </div>
    );
  }

  return (
    <div>
      <h3 className="text-2xl font-bold mb-6">Dashboard Overview</h3>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        {stats.map((stat, index) => (
          <div
            key={index}
            onClick={() => navigate(stat.link)}
            className={`${
              darkMode ? 'bg-gray-900' : 'bg-white'
            } rounded-xl border ${
              darkMode ? 'border-gray-800' : 'border-gray-200'
            } p-6 cursor-pointer hover:shadow-lg transition-all`}
          >
            <div className="flex items-center justify-between mb-4">
              <div className={`${stat.color} p-3 rounded-lg text-white`}>
                {stat.icon}
              </div>
            </div>
            <p className="text-3xl font-bold mb-1">{stat.value}</p>
            <p className="text-sm text-gray-400">{stat.title}</p>
          </div>
        ))}
      </div>

      <div className={`${darkMode ? 'bg-gray-900' : 'bg-white'} rounded-xl border ${
        darkMode ? 'border-gray-800' : 'border-gray-200'
      } p-6`}>
        <h4 className="text-lg font-semibold mb-4">Quick Actions</h4>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <button
            onClick={() => navigate(ROUTES.DOMAIN_NEW)}
            className="p-4 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors text-left"
          >
            <p className="font-semibold mb-1">Create VM</p>
            <p className="text-sm opacity-90">Launch a new virtual machine</p>
          </button>
          <button
            onClick={() => navigate(ROUTES.STORAGE)}
            className="p-4 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors text-left"
          >
            <p className="font-semibold mb-1">Manage Storage</p>
            <p className="text-sm opacity-90">Configure storage pools and volumes</p>
          </button>
          <button
            onClick={() => navigate(ROUTES.CONNECTIONS)}
            className="p-4 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors text-left"
          >
            <p className="font-semibold mb-1">Connections</p>
            <p className="text-sm opacity-90">Manage hypervisor connections</p>
          </button>
        </div>
      </div>
    </div>
  );
};

export default Dashboard;